<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
    <title></title>
    <script src="js/mui.min.js"></script>
    <link href="css/mui.min.css" rel="stylesheet"/>
	<link href="css/header.css" rel="stylesheet"/>
    <script type="text/javascript" charset="utf-8">
      	mui.init();
		mui.plusReady(function(){
			plus.navigator.setStatusBarStyle("light")
			plus.navigator.setStatusBarBackground("#F0AD4E");
		})
    </script>
</head>
<body>
	<header class="mui-bar mui-bar-nav title">
		<h1 class="mui-title title-color" >羽信</h1>
	</header>
	
	<nav class="mui-bar mui-bar-tab">
		<a class="mui-tab-item mui-active" tab-index="0">
			<span class="mui-icon mui-icon-weixin "></span>
			<span class="mui-tab-label">消息</span>
		</a>
		<a class="mui-tab-item" tab-index="1">
			<span class="mui-icon mui-icon-contact "></span>
			<span class="mui-tab-label">好友</span>
		</a>
		<a class="mui-tab-item" tab-index="2">
			<span class="mui-icon mui-icon-search"></span>
			<span class="mui-tab-label">发现</span>
		</a>
		<a class="mui-tab-item" tab-index="3">
			<span class="mui-icon mui-icon-home"></span>
			<span class="mui-tab-label">我</span>
		</a>
	</nav>
	
	<script type="text/javascript" charset="utf-8">
	  	var arr = [
		{
		   pageId:"chat-list.html",
		   pageUrl:"chat-list.html"
		},
		{
			pageId: "contact.html",
			pageUrl: "contact.html"
		},
		{
			pageId: "find.html",
			pageUrl: "find.html"
		},
		{
			pageId: "me.html",
			pageUrl: "me.html"
		}]
		
		var yuxinstyle = {
			top: "44px",
			bottom: "50px"
		}
		
		mui.plusReady(function(){
			var indexWebview = plus.webview.currentWebview()
			//向当前的主页webview追加4账webview
			for(var i = 0;i < arr.length; i++){
				 var page = plus.webview.create(arr[i].pageUrl,arr[i].pageId,yuxinstyle)
					        page.hide()
				indexWebview.append(page)
				
			}
			plus.webview.show(arr[0].pageId)
			
			mui(".mui-bar-tab").on("tap","a",function(){
				var tabindex = this.getAttribute("tab-index")
				plus.webview.show(arr[tabindex].pageId,"fade-in",200)
				for(var i = 0;i < arr.length; i++){
					if(i != tabindex){
						plus.webview.hide(arr[i].pageId,"fade-out",200)
					}
				}
			})
		})
	</script>
	
</body>
</html>